<template>
  <view class="teamcenter">
    <view class="teamshuju bgRadius">
      <view class="shujuTitle">
        <view class="title">
          <image src="@/static/team/team10.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="twoBtn flex flex-align">
        <view class="btn flex flex-align flex-center" :class="tabIndex==1?'active':''" @click="goTab(1)">
          <image :src="tabIndex==1?'/static/team/teamActive05.png':'/static/team/team05.png'" mode="scaleToFill" />
          <view>佣金收入</view>
        </view>
        <view class="btn flex flex-align flex-center" :class="tabIndex==2?'active':''" @click="goTab(2)">
          <image :src="tabIndex==2?'/static/team/teamActive04.png':'/static/team/team04.png'" mode="scaleToFill" />
          <view>红包支出</view>
        </view>
      </view>
      <view class="shujuList flex flex-line">
        <view class="list flex-1">
          <view class="listTitle">本日支出</view>
          <view class="listNum">¥{{group_commission_income.today}}</view>
        </view>
        <view class="list flex-1">
          <view class="listTitle">昨日支出</view>
          <view class="listNum">¥{{group_commission_income.yesterday}}</view>
        </view>
        <view class="list flex-1">
          <view class="listTitle">支出总额</view>
          <view class="listNum">¥{{group_commission_income.total}}</view>
        </view>
      </view>
      <view class="chart-container">
        <qiun-data-charts type="demotype" :opts="opts1" :chartData="chartsDataLine2"/>
        <!-- <canvas id="chart" canvas-id="chart" class="chart"></canvas> -->
      </view>
    </view>
    <!-- 订单数据 -->
    <view class="teamshuju bgRadius">
      <view class="shujuTitle">
        <view class="title">
          <image src="@/static/team/team07.png" mode="scaleToFill" />
        </view>
        <view class="flex flex-align flex-center shujuorder">
          <view>全部订单</view>
          <image src="@/static/team/team02.png"  mode="scaleToFill" />
        </view>
      </view>
      <view class="shujuTime flex flex-line">
        <view class="time">数据更新至{{formatDate(now)}}</view>
        <!-- <view class="timeList flex flex-align flex-line">
          <view class="timeBtn">昨日</view>
          <view class="timeBtn">今日</view>
          <view class="timeBtn">最近7天</view>
          <view class="timeBtn">最近15天</view>
          <view class="timeBtn">自定义</view>
        </view> -->
        <view class="chart-container" style="margin-bottom: 40rpx;">
          <qiun-data-charts type="column" :opts="opts" :chartData="chartsDataColumn2"/>
          <!-- <canvas id="chart" canvas-id="chart" class="chart"></canvas> -->
        </view>
        <view class="orderList flex flex-line">
          <view class="list">
            <view class="listTitle">订单总数</view>
            <view class="listNum">{{group_order_count.order_total}}</view>
          </view>
          <view class="list">
            <view class="listTitle">订单销售额</view>
            <view class="listNum">￥{{group_order_count.order_sale_amount}}</view>
          </view>
          <view class="list">
            <view class="listTitle">售后订单数量（笔）</view>
            <view class="listNum">{{group_order_count.order_inactive_count}}</view>
          </view>
          <view class="list">
            <view class="listTitle">有效订单数量（笔）</view>
            <view class="listNum">{{group_order_count.order_active_count}}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 社团数据 -->
    <view class="teamshuju bgRadius">
      <view class="shujuTitle">
        <view class="title">
          <image src="@/static/team/team08.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="shujuTime">
        <view class="time">数据更新至{{formatDate(now)}}</view>
        <view class="shujuList flex flex-line" style="padding: 30rpx 0 10rpx;">
          <view class="list flex-1" @click="menuJump({is_tab: false,link: '/pages/team/newadd?type=0&name=会员总数',link_type: 1})">
            <view class="listTitle flex flex-align flex-center">
              <view>会员总数</view>
              <image src="@/static/team/team11.png" mode="scaleToFill" />
            </view>
            <view class="listNum">{{group_member_count.member_total}}</view>
          </view>
          <view class="list flex-1" @click="menuJump({is_tab: false,link: '/pages/team/newadd?type=1&name=今日新增',link_type: 1})">
            <view class="listTitle flex flex-align flex-center">
              <view>今日新增</view>
              <image src="@/static/team/team11.png" mode="scaleToFill" />
            </view>
            <view class="listNum">{{group_member_count.member_today}}</view>
          </view>
          <view class="list flex-1" @click="menuJump({is_tab: false,link: '/pages/team/newadd?type=2&name=昨日新增',link_type: 1})">
            <view class="listTitle flex flex-align flex-center">
              <view>昨日新增</view>
              <image src="@/static/team/team11.png" mode="scaleToFill" />
            </view>
            <view class="listNum">{{group_member_count.member_yesterday}}</view>
          </view>
        </view>
        <!-- <view class="timeList flex flex-align flex-line">
          <view class="timeBtn">昨日</view>
          <view class="timeBtn">今日</view>
          <view class="timeBtn">最近7天</view>
          <view class="timeBtn">最近15天</view>
          <view class="timeBtn">自定义</view>
        </view> -->
        <view class="chart-container">
          <qiun-data-charts type="demotype" :opts="opts1" :chartData="chartsDataLine3"/>
        </view>
      </view>
    </view>
    <!-- 直播数据 -->
    <view class="teamshuju bgRadius">
      <view class="shujuTitle">
        <view class="title">
          <image src="@/static/team/team09.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="shujuTime">
        <view class="time">数据更新至{{formatDate(now)}}</view>
        <view class="shujuList flex flex-line" style="padding: 30rpx 0 10rpx;">
          <view class="list flex-1">
            <view class="listTitle flex flex-align flex-center">
              <view>总观看人数</view>
              <image src="@/static/team/team11.png" mode="scaleToFill" />
            </view>
            <view class="listNum">{{group_member_watching_count.watching_total}}</view>
          </view>
          <view class="list flex-1">
            <view class="listTitle flex flex-align flex-center">
              <view>今日观看人数</view>
              <image src="@/static/team/team11.png" mode="scaleToFill" />
            </view>
            <view class="listNum">{{group_member_watching_count.watching_today}}</view>
          </view>
          <view class="list flex-1">
            <view class="listTitle flex flex-align flex-center">
              <view>昨日观看人数</view>
              <image src="@/static/team/team11.png" mode="scaleToFill" />
            </view>
            <view class="listNum">{{group_member_watching_count.watching_yesterday}}</view>
          </view>
        </view>
        <!-- <view class="timeList flex flex-align flex-line">
          <view class="timeBtn">昨日</view>
          <view class="timeBtn">今日</view>
          <view class="timeBtn">最近7天</view>
          <view class="timeBtn">最近15天</view>
          <view class="timeBtn">自定义</view>
        </view> -->
        <view class="chart-container">
          <qiun-data-charts type="demotype" :opts="opts1" :chartData="chartsDataLine4"/>
        </view>
      </view>
    </view>
    <TabBar :tabBarShow="0"></TabBar>
  </view>
</template>

<script setup lang="ts">
import { statisticsData } from '@/api/user';
import TabBar from '@/components/TabBar/teamTabBar.vue'
import demodata from '@/mockdata/demodata.json';
import mapdata from '@/mockdata/mapdata.json'
import { menuJump } from '@/utils/tools';
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const tabIndex = ref(1)
const chartsDataLine2 = ref<any>();
const chartsDataColumn2 = ref<any>();
const chartsDataLine3 = ref<any>();
const chartsDataLine4 = ref<any>();
const goTab = (index:any)=>{
  tabIndex.value = index
}
const opts = ref<any>({
  extra:{
    column:{ type:'stack',seriesGap:5,barBorderRadius:[6,6,6,6]}
  },
  legend:{show:true},
  xAxis:{disableGrid:true,axisLineColor:'#fff'},
  yAxis:{axisLine:true,gridType:'dash',data:[{axisLine:false,axisLineColor:'#fff'}]}
});
const opts1 = ref<any>({
  extra:{line:{activeType:'hollow',animation:'horizontal',type:'straight'}},
  yAxis:{axisLine:true,gridType:'dash',data:[{axisLine:false,axisLineColor:'#fff'}]},
  xAxis:{scrollShow:true},
  // enableScroll:true,
});
onMounted(() => {
  getDataInfo()
  
});
const group_commission_income = ref<Recordable>({})
const group_member_count = ref<Recordable>({})
const group_member_watching_count = ref<Recordable>({})
const group_order_count = ref<Recordable>({})
const group_redpacket_out = ref<Recordable>({})
const now = new Date();
  // 计算七天前的日期
const sevenDaysAgo = new Date(now);
sevenDaysAgo.setDate(now.getDate() - 6);
const prame = ref<Recordable>({
  start_at: formatDate(sevenDaysAgo),
  end_at: formatDate(now),
  type:'commision_income'
})
console.log(prame.value);
function getDataInfo() {
  statisticsData(prame.value).then((res:any)=>{
    group_commission_income.value = res.group_commission_income
    group_member_count.value = res.group_member_count
    group_member_watching_count.value = res.group_member_watching_count
    group_order_count.value = res.group_order_count
    group_redpacket_out.value = res.group_redpacket_out
    res.group_commission_income.line.series[0].color = '#FE7431'
    res.group_order_count.line.series[0].color = '#FE7431'
    res.group_order_count.line.series[1].color = '#EFC565'
    res.group_member_count.line.series[0].color = '#FE7431'
    res.group_member_watching_count.line.series[0].color = '#FE7431'
    res.group_commission_income.line.series[0].color = '#FE7431'
    chartsDataLine2.value = res.group_commission_income.line
    chartsDataColumn2.value = (res.group_order_count.line)
    chartsDataLine3.value = res.group_member_count.line
    chartsDataLine4.value = res.group_member_watching_count.line
  })
}
function formatDate(date:any) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}
</script>

<style scoped lang="scss">
.teamcenter{padding: 30rpx;}
.teamshuju{padding: 30rpx 30rpx 1rpx;
  .twoBtn{margin: 20rpx 0 30rpx;
    .btn{font-size: 26rpx;
      width: 180rpx;height:64rpx;color: #969799;border-radius: 64rpx;background:#F3F4F7;text-align: center;line-height: 64rpx;
      image{width: 48rpx;height: 48rpx;}
    }
    .btn.active{
      color: #fff;background: #FE7431;
    }
    .btn:nth-child(1){margin-right: 20rpx;}
  }
  .shujuTime{margin: 20rpx 0;
   .time{
      color: #969799;font-size: 26rpx;
    }
    .timeList{margin-top: 20rpx;
      .timeBtn{
        color: #969799;font-size: 24rpx;border: 1px solid #F3F4F7;border-radius: 64rpx;padding: 8rpx 20rpx 12rpx;margin-right: 11rpx;
        margin-bottom: 20rpx;background: #F3F4F7;
      }
    }
    .orderList{width: 100%;
     .list{width: 48%;background: #F3F4F7;border-radius: 16rpx;padding:30rpx;margin-right: 4%;margin-bottom: 20rpx;box-sizing: border-box;
       .listTitle{
          color: #969799;font-size: 26rpx;
          
        }
       .listNum{
          color: #323233;font-size: 36rpx;font-weight: bold;margin-top: 6rpx;
        }
      }
      .list:nth-child(2n){margin-right: 0;}
    }
  }
}
.shujuList{
  .list{
    text-align: center;position: relative;
    .listTitle{
      color: #969799;font-size: 26rpx;
      image{width: 32rpx;height: 32rpx;}
    }
    .listNum{
      color: #323233;font-size: 36rpx;font-weight: bold;margin-top: 6rpx;
    }
  }
  .list::after{
    content: '';position: absolute;right: 0;top: 50%;width: 1px;height: 40rpx;background: #EAEAEA;margin-top: -20rpx;
  }
  .list:last-child::after{
    background: #fff;
  }
}
.chart-container {
    width: 100%;
   padding-top: 20rpx;
  }
.shujuTitle{position: relative;
  image{
    width: 134rpx;height: 48rpx;
  }
  .shujuorder{
    position: absolute;right: -30rpx;top: 30rpx;background:linear-gradient(to right,#FFF2E7,#FFDFD9);border-radius:64rpx 0 0 64rpx;padding: 18rpx 10rpx 18rpx 30rpx;
    view{
      color: #FE7431;font-size: 26rpx;
    }
    image{
      width: 32rpx;height: 32rpx;
    }
  }
}
</style>